[#ftl]	
[@define "agile.grid.GridBody" "agile._Component,agile._ContainerToolbar"]    	
  widgetName:"GridBody"
  ,templateString:"<div data-dojo-attach-point='containerNode'></div>"	
  ,cellTemplateString:'<td class="column {field}" width="{width}" {html-style}">{innerHTML}</td>'
  ,cellEditorTemplateString:'<div class="editor" data-dojo-type="dijit.InlineEditBox" style="width:{width};height:20px" noValueIndicator="" width="{width}" {disabled}>{value}</div>'	
//  ,rowCount:0
	  ,rows:null
  ,styleConstraints:agile.delegate(agile._Component.prototype.styleConstraints,{
		"left":{_ignore:true,_readOnly:true}
		,"top":{_ignore:true,_readOnly:true}
		,"width":{_ignore:true,_readOnly:true}
		,"height":{_ignore:true,_readOnly:true}
	})
  ,attributes:agile.delegate(agile._Component.prototype.attributes,{

  })
  ,constructor:function(param){
  		this.parent = param.parent;
  		this.rows = [];
  }
 ,init:function(){
	 //console.log(this.declaredClass,"[agile.grid.GridBody]init...");
	 this.refreshData();
 }
  ,refreshData:function(){
	  	for(var i = this.rows.length - 1; i >=0; i--){
  			construct.destroy(this.rows[i]);  			
  		}
	  	this.rows.splice(0,this.rows.length);
	  	
	  var data = this.parent.getData();
//	  console.log("@@@@@@data=",data);
	  	if(data && data.length > 0){
	  		array.forEach(data,function(record){
//		  		this.addRow(record);	
		  		this.addComponent(this.addRow(record));
		  	},this);
	  	}else{
//	  		this.addRow();	  		
	  		this.addComponent(this.addRow());
	  	}
  }
  ,addComponent:function(child){
	  this.containerNode.appendChild(child);
  }
  ,createChild:function(){
	  return this.addRow();
  }
  ,removeChild:function(child){
	  this.removeRow(child)
  }
	,showControlButtons:function(child){		
		//summary:show the add/remove icon
		query(".agileButton",this.toolbarDom).style("display","inline");
		
		//console.log(this.declaredClass,"showControlButtons:",this._getChildren().length,this.minChildSize,this.maxChildSize);
		if(this.rows.length == this.minChildSize){
			query(".agileButtonRemove",this.toolbarDom).style("display","none");			
		}
		
		if(this.rows.length == this.maxChildSize){
			query(".agileButtonAdd",this.toolbarDom).style("display","none");			
		}	
		this.selectedChild = child;

		construct.place(this.toolbarDom,query(".toolbarAnchorNode",child)[0],"last");		
	}	
	
  ,addRow:function(record){
	  	var rowHtml = "<table><tr class='row' style='background-color:#fff5ee'>";
	  	var columns = this.parent.getHeadColumns();
	  	////console.log("columns=",columns,",record=",record);
	  	for(var i = 0; i < columns.length; i++){				
	  		var value = "";
	  		if(record){
	  			value =  record[columns[i].metadata("parameters.field")];
	  			if(value == null){
	  				value = "";
	  			}
	  		}
	  		var style = "";
	  		////console.log("parameters of column#"+i,columns[i].metadata("parameters"),",value=",value);
	  		var noValueIndicator = "";
	  		if(columns[i].metadata("parameters.hidden")){
	  			style = "style='visibility:hidden'";
	  			noValueIndicator = 'noValueIndicator=""';
	  		}  		
  			var readOnly = "disabled";// !columns[i].metadata("parameters.editable");
  			var innerHTML = lang.replace(this.cellEditorTemplateString,lang.mixin({value:value,noValueIndicator:noValueIndicator},columns[i].metadata("parameters")));
  			rowHtml += lang.replace(this.cellTemplateString,lang.mixin({},{innerHTML:innerHTML,"html-style":style,disabled:readOnly},columns[i].metadata("parameters")));
	  	}
	  	
	  	rowHtml += '<td style="background-color:transparant"><div class="toolbarAnchorNode"></div></td>';
	  	rowHtml += "</tr></table>";
	  	
	  	var rowDiv = construct.create("div",{innerHTML:rowHtml});
	  	// style.set(rowDiv,"position","absolute");
	  	parser.parse(rowDiv);
	  	
	  	on(rowDiv,mouse.enter,lang.hitch(this,function(evt){								
			this.showControlButtons(rowDiv);
		}));
	  	
//	  	this.containerNode.appendChild(rowDiv);
	  	
//	  	query(".agileButtonAdd",rowDiv).forEach(function(node){
//	  		on(node,"click",lang.hitch(this,"addRow"));
//	  	},this);
//	  	query(".agileButtonRemove",rowDiv).forEach(function(node){
//	  		on(node,"click",lang.hitch(this,function(){
//	  			this.removeRow(rowDiv);
//	  		}));
//	  	},this);
	  	
//	  	on(rowDiv,"mouseover",lang.hitch(this,function(){
//	  		query(".agileButtonAdd",rowDiv).forEach(function(node){
//	  			style.set(node,"display","inline");
//	  		},this);	
//	  		if(this.rows.length > 1){
//	  			query(".agileButtonRemove",rowDiv).forEach(function(node){
//	  				style.set(node,"display","inline");
//	  			},this);
//	  		}
//	  	}));
//	  	on(rowDiv,"mouseout",lang.hitch(this,function(){
//	  		query(".agileButton",rowDiv).forEach(function(node){
//	  			style.set(node,"display","none");
//	  		},this);	
//	  	}));

	  	this.rows.push(rowDiv);
	  	return rowDiv;
  }
  ,removeRow:function(rowDiv){
	  	for(var i = this.rows.length - 1; i >=0; i--){
	  		if(rowDiv ==  this.rows[i]){
	  			this.rows.splice(i,1);
	  		}
	  	}
	  	construct.destroy(rowDiv);	  	
  }
  ,addColumn:function(column){
	  	query(".row",this.containerNode).forEach(function(row,index){
	  		var cell = row.insertCell(row.cells.length - 1);
	          domClass.add(cell,"column");
	          domClass.add(cell,column.metadata("parameters.field"));
	          // style.set(cell,"width",column.metadata("parameters.width"));
	          style.set(cell,"width",(column.dimension.width + 5)+"px");
	
	          var cellDiv = construct.create("div",{innerHTML:lang.replace(this.cellEditorTemplateString,lang.mixin({value:""},column.metadata()))});
	          parser.parse(cellDiv);
	          cell.appendChild(cellDiv.firstChild);		        
	  	},this);
  }
  ,removeColumn:function(column){
	  	var field = column.metadata("parameters.field");
//	  	console.log("Remove column:",field,this.containerNode)
	  	query("."+field,this.containerNode).forEach(function(cell,index){					
	  		cell.parentNode.removeChild(cell);
	  	});
  }
  ,moveColumn:function(column,from,to){
	  	var field = column.metadata("parameters.field");
	  	query("."+field,this.containerNode).forEach(function(cell,index){
	  		var row = cell.parentNode; 
	  		row.removeChild(cell);				 
	  		row.replaceChild(cell,row.insertCell(to));				
	  	});	
  }
  ,adjustColumnWidth:function(column){			
	  	var field = column.metadata("parameters.field");
	  	query("."+field,this.containerNode).forEach(function(cell,index){
	  		style.set(cell,{width:column.metadata("style.width")});
	  		query(".editor",cell).style({width:column.metadata("style.width")});
	  	});		
  }

  ,toHtml:function(){
		var records = [];
		var columns = this.parent.getHeadColumns();
		query(".row",this.containerNode).forEach(function(row,index){
			var record = {};
			query(".editor",row).forEach(function(node,idx){
				// //console.log(this.columns[idx].metadata("field"),registry.byNode(node).get("value"));
				if(columns[idx]){
					record[columns[idx].metadata("parameters.field")] = registry.byNode(node).get("value");
				}
			},this);
			record._id = "id"+index;
			records.push(record);
		},this);
		[#--
		[#noparse]
		var objectStore = string.substitute("dojo.data.ObjectStore({objectStore: new dojo.store.Memory({idProperty:'_id',data:json.parse('${data}',false)})})",{data:json.stringify(records)});
		[/#noparse]
		var template = '<'+'script type="dojo/connect" event="startup">this.set("store",{objectStore});<' + '/script>';
		return lang.replace(template,{objectStore:objectStore});	
		--]
		
		[#assign scriptTemplate][#compress][#noparse]
		<script type="dojo/connect" event="startup">
		var self = this;
		require({async:false},["dojo/data/ObjectStore","dojo/store/Memory"],function(ObjectStore,Memory){
			self.set("store",new ObjectStore({objectStore: new Memory({idProperty:'_id',data:json.parse('${data}',false)})}));
		});
		</script>
		[/#noparse][/#compress][/#assign]
		
		return string.substitute("${scriptTemplate?js_string}",{data:json.stringify(records)});		
  }
  ,isOptional:function(){
  	return false;
  }
  [/@]
